<template>
  <div class="app-container">
    <el-card>
      <el-form
        :model="requestParameters"
        ref="requestParameters"
        label-width="80px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                @keydown.enter.native="handleFilter"
                placeholder="根据编号搜索"
                clearable
                v-model="keyword"
              />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item style="text-align: right">
              <el-button size="small" @click="clear">清除</el-button>
              <el-button size="small" type="primary" @click="onSearch()"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <el-table :data="data" fit style="width: 100%">
        <el-table-column label="编号">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="题型">
          <template slot-scope="data">
            <p v-if="data.row.questionType === '1'">单选</p>
            <p v-else-if="data.row.questionType === '2'">多选</p>
            <p v-else>简答</p>
          </template>
        </el-table-column>
        <el-table-column label="题目编号">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.questionIDs" :key="index">
              <p class="number" @click="preview(item.id)">{{ item.number }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.addTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="答题时间(s)"
          ><template slot-scope="scope">
            <span>{{ scope.row.totalSeconds }}</span>
          </template>
        </el-table-column>
        <el-table-column label="正确率(%)">
          <template slot-scope="scope">
            <span>{{ scope.row.accuracyRate }}</span>
          </template></el-table-column
        >
        <el-table-column label="录入人">
          <template slot-scope="scope">
            <span>{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="removeUser(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right; margin-top: 20px; margin-bottom: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="Number(requestParameters.page)"
        :total="Number(total)"
        :page-sizes="[2, 10, 20, 30, 50]"
        :page-size="20"
        layout="sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <!-- 弹窗 -->
    <QuestionsPreview
      ref="dialog"
      :dialogVisible="dialogVisible"
      @close="onClosedialogVisible"
      :questionItem="questionItem"
    ></QuestionsPreview>
  </div>
</template>

<script>
import QuestionsPreview from '../components/questions-preview.vue'
import { status } from '@/api/hmmm/constants'
import { detail, randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      keyword: '',
      questionItem: {},
      dialogVisible: false,
      data: [],
      input: '',
      alertText: '',
      total: null,
      requestParameters: {
        page: 1,
        pagesize: 20
      }
    }
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    onClosedialogVisible () {
      this.dialogVisible = false
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
      this.getList()
    },
    // 进入某一页
    handleCurrentChange (val) {
      if (this.requestParameters.keyword) {
        if (this.requestParameters.keyword !== this.keyword) {
          this.keyword = this.requestParameters.keyword
        }
      }
      this.requestParameters.page = val
      this.getList()
    },
    // 回车搜索
    handleFilter (e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode === 13) {
        if (this.keyword === '') {
          this.$message.warning('查询条件不能为空！')
        } else {
          this.onSearch()
        }
      }
    },
    // 搜索
    onSearch () {
      if (this.keyword === '') {
        this.$message.warning('查询条件不能为空！')
      } else {
        this.requestParameters.page = 1
        this.requestParameters.keyword = this.keyword
        this.getList()
      }
    },
    // 清空搜索框
    clear () {
      this.keyword = ''
      this.requestParameters.page = 1
      this.requestParameters.keyword = this.keyword
      this.getList()
    },
    async getList (params) {
      this.listLoading = true
      const { data: res } = await randoms(this.requestParameters)
      // console.log(res)
      // 获取数据给dataList
      this.data = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 弹窗
    async preview (id) {
      const { data } = await detail({ id })
      // console.log(data, 999)
      this.questionItem = data
      this.dialogVisible = true
    },
    // 删除题组
    async removeUser (id) {
      const res = await this.$confirm(
        '此操作将永久删除该题组, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (res === 'confirm') {
        await removeRandoms(id)
        // const data = await removeRandoms(id)
        this.$message.success('删除成功!')
        this.getList()
        // console.log(data)
      }
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped lang="scss">
.alert {
  margin: 5px 0px;
}
.pagination {
  margin-top: 10px;
}
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
.number {
  color: #09f;
  cursor: pointer;
  line-height: 10px;
}
</style>
